<template>
  <div id="detail">
    <div class="Previouswe">
      <p @click="$router.go(-1)">
        <van-icon name="arrow-left" />
        <span>返回</span>
      </p>
      <h3>详细</h3>
    </div>
    <!-- 回到顶部 -->
    <div id="hui" @click="hui">
      <van-icon name="back-top" />
    </div>
    <!-- 加载 -->
    <template v-if="count != undefined">
      <!-- 图片/评论等 -->
      <div id="contents">
        <van-image :src="count.author.avatar_url" />
        <!--  -->
        <div class="cont_box">
          <h2 v-text="count.title" title="count.title"></h2>
          <div class="cout_box_tishi">
            <p>{{ _dayjs(count.create_at).locale("zh-cn").fromNow() }}</p>
            <p>
              <van-icon name="comment-circle-o" />
              <span>{{ count.replies.length }}</span>
            </p>
          </div>
        </div>
        <div class="shoucang">
          <!-- 是否收藏 -->
          <template v-if="zhuang == false">
            <van-button square type="primary" @click="shouc">
              <van-icon name="star-o" />
            </van-button>
          </template>
          <template v-else>
            <van-button square type="primary" @click="shouc" style="color: red">
              <van-icon name="star-o" />
            </van-button>
          </template>
        </div>
      </div>
      <!-- 显示内容 -->
      <div id="Display" v-html="count.content"></div>
      <!-- 评论 -->
      <pingl :counts="count"></pingl>
    </template>
    <template v-else>
      <van-loading size="24px">加载中...</van-loading>
    </template>
  </div>
</template>
<script>
import { mapState } from "vuex";
//日期格式化
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import relativeTime from "dayjs/plugin/relativeTime";
dayjs.extend(relativeTime);
// 提示信息
import { Notify } from "vant";
// 评论
import pingl from "./detail_list/detail.ping.vue";
import axios from "axios";
// 窗口滚动
window.onscroll = function () {
  //为了保证兼容性，这里取两个值，哪个有值取哪一个
  //scrollTop就是触发滚轮事件时滚轮的高度
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  // console.log("滚动距离" + scrollTop);
  if (scrollTop >= 200) {
    document.documentElement
      .querySelector("#hui")
      .setAttribute("style", "opacity:1");
  } else {
    document.documentElement
      .querySelector("#hui")
      .setAttribute("style", "opacity:0");
  }
};

export default {
  name: "detail",
  data() {
    return {
      _dayjs: "",
      gid: "",
      shows: false,
      zhuang: false,
    };
  },
  components: {
    pingl,
  },
  created() {
    if (this.$route.query.tab == undefined) {
      Notify({ type: "primary", message: "无效的话题" });
      this.$router.push({ path: "/" });
      return false;
    }
    if (window.localStorage.getItem("user") != undefined) {
      this.$store.dispatch("detailed_list", {
        gid: this.$route.query.tab,
        ac: JSON.parse(window.localStorage.getItem("user")).acc,
      });
      //   匹配收藏中是否有这个内容
      // axios
      //   .get(
      //     "https://cnodejs.org/api/v1/topic_collect/" +
      //       JSON.parse(window.localStorage.getItem("user")).loginname
      //   )
      //   .then((res) => {
      //     if (res.data.data.findIndex((re) => re.id == this.$route.query.tab)) {
      //       this.zhuang = true;
      //     }
      //   });
    } else {
      this.$store.dispatch("detailed_list", {
        gid: this.$route.query.tab,
        ac: false,
      });
    }
    this._dayjs = dayjs;
  },
  methods: {
    //提示信息&&收藏
    shouc() {
      this.zhuang = !this.zhuang;
      if (this.zhuang) {
        if (JSON.parse(window.localStorage.getItem("user")) != undefined) {
          axios
            .post("https://cnodejs.org/api/v1/topic_collect/collect", {
              topic_id: this.$route.query.tab,
              accesstoken: JSON.parse(window.localStorage.getItem("user")).acc,
            })
            .then((res1) => {
              console.log(res1.data.success);
            });
          Notify({ type: "primary", message: "已添加收藏" });
        }
      } else {
        if (JSON.parse(window.localStorage.getItem("user")) != undefined) {
          axios
            .post("https://cnodejs.org/api/v1/topic_collect/de_collect", {
              topic_id: this.$route.query.tab,
              accesstoken: JSON.parse(window.localStorage.getItem("user")).acc,
            })
            .then((res1) => {
              console.log(res1.data.success);
            });
          Notify({ type: "warning", message: "你已经取消收藏" });
        }
      }
    },
    // 滚动
    hui(s) {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
  },
  computed: {
    ...mapState({
      count: (state) => state.dh.d_lists,
    }),
  },
};
</script>
<style lang="sass" scope="scope">
@import "../assets/sass/detail.sass"
</style>